<template>
  <div id="city">
    <ul style="padding-top: 30px; ">
      <li class="animate__animated animate__fadeInDown">
        <label>出发城市</label> <br>
        <el-autocomplete
            style="width: 123px; font-size: 0.9em"
            v-model="busInfo.startPlace"
            :fetch-suggestions="querySearch"
            placeholder="城市名"
            @select="handleSelect"
        />

      </li>

      <li id="arrive_city" class="animate__animated animate__fadeInDown">
        <label>到达城市</label> <br>
<!--        <el-input-->
<!--            style="width: 123px; font-size: 0.9em"-->
<!--            ref="busArriveCity"-->
<!--            placeholder="中文/拼音/首字母"-->
<!--            v-model="busInfo.endPlace">-->

<!--        </el-input>-->
        <el-autocomplete
            style="width: 123px; font-size: 0.9em"
            v-model="busInfo.endPlace"
            :fetch-suggestions="querySearch"
            placeholder="城市名"
            @select="handleSelect"
        />
      </li>

      <li class="li_curr animate__animated animate__fadeInUp">
        <label>出发日期</label><br>
        <el-date-picker
            ref="busLeaveTime"
            placeholder="选择日期"
            v-model="busInfo.date"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
          >

        </el-date-picker>
      </li>

      <li style="text-align: right;">
        <el-button
            class="li_curr animate__animated animate__fadeInUp"
            @click="search"
            id="searchButton"
            size="default"
            color="#FF6257">
          搜索
        </el-button>
      </li>
    </ul>
<!--    交换城市-->
    <el-button
        class="animate__animated animate__fadeIn"
        id="search-button"
        circle
        :icon="Switch"
        @click="swap">
    </el-button>
  </div>
</template>

<script>
import {Switch} from "@element-plus/icons-vue";
import {getCurrentInstance, reactive, ref} from 'vue'
import {ElMessage} from "element-plus";
import {useStore} from "vuex";
import {useRouter} from "vue-router";

export default {
  name: "BusInfo",
  data(){
    return {
      busHintInfo:[],
    }
  },
  methods:{
    querySearch(queryString, cb) {
      let busHintInfo = this.busHintInfo;
      let results = queryString ? busHintInfo.filter(this.createFilter(queryString)) : busHintInfo;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        { "value": "北京" },
        { "value": "上海" },
        { "value": "广州" },
        { "value": "深圳" },
      ];
    },
    handleSelect(item) {
      console.log(item);
    },
  },
  mounted() {
    this.busHintInfo = this.loadAll()
  },

  setup() {
    let busArriveCity = ref(null)
    let busLeaveTime = ref(null)
    const instance = getCurrentInstance()
    const store = useStore()


    let busInfo = reactive({
      startPlace: '',
      endPlace: '',
      date: '',
    })

    // 交换城市
    const swap = () => {
      if (busInfo.endPlace === '' && busInfo.startPlace){
        instance.ctx.$refs.leaveCityInput.focus()
        ElMessage({
          message: '请输入城市名',
          type: 'warning',
        })
      }  else {
        let temp = busInfo.startPlace
        busInfo.startPlace = busInfo.endPlace
        busInfo.endPlace = temp
      }
    }
    // 搜索按钮
    const search = () => {
      if (busInfo.startPlace === '') {
        instance.ctx.$refs.leaveCityInput.focus()
        ElMessage({
          message: '请输入出发地',
          type: 'warning',
        })
      } else if (busInfo.endPlace === '') {
        busArriveCity.value.focus()
        ElMessage({
          message: '请输入目的地',
          type: 'warning',
        })
      } else if (busInfo.date === '') {
        busLeaveTime.value.handleOpen()
        ElMessage({
          message: '请输入出发日期',
          type: 'warning',
        })
      } else {
        store.commit("navigationChange", 'bus')
        store.commit("busSearch", busInfo)
      }
    }

    return {
      Switch,
      busInfo,
      busArriveCity,
      busLeaveTime,
      swap,
      search,
    }
  }
}
</script>

<style scoped>
#city {
  width: 100%;
}

li {
  list-style: none;
  text-align: -webkit-match-parent
}

#arrive_city {
  position: relative;
  top: -97px;
  left: 220px;
}

li{
  text-align: left;
  margin-bottom: 40px
}
#searchButton {
  color: white;
  position: relative;
  right: 40px;
  width: 100px;
  text-align: center;
}

#search-button {
  position: relative;
  top: -335px;
  left: 50px;
}
.animate__fadeIn {
  --animate-duration: 3s;
}

.li_curr {
  position: relative;
  top: -100px;
}

</style>